<template>
    <div>
        <!-- 轮播 -->
        <el-carousel height="480px">
            <el-carousel-item v-for="item in bannerlist" :key="item">
                <img :src='item.url' alt="">
            </el-carousel-item>
        </el-carousel>
        <div class="contop">
            <el-row :gutter="20" class="cen">
                <el-col :span="4">
                    <div class="grid-content ep-bg-purple" />
                </el-col>
                <el-col :span="16" class="btnbox">
                    <el-button type="primary" plain>
                        <el-icon>
                            <Guide />
                        </el-icon>
                    </el-button>
                    <el-button type="primary" plain>
                        <el-icon>
                            <Camera />
                        </el-icon>
                    </el-button>
                    <el-button type="primary" plain>
                        <el-icon>
                            <Memo />
                        </el-icon>
                    </el-button>
                    <el-button type="primary" plain>
                        <el-icon>
                            <OfficeBuilding />
                        </el-icon>
                    </el-button>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content ep-bg-purple" />
                </el-col>
            </el-row>
            <el-row :gutter="20" class="navtext">
                <el-col :span="4">
                    <div class="grid-content ep-bg-purple" />
                </el-col>
                <el-col :span="16" class='btnbox'>
                    <span>景区详情</span>
                    <span>全景预览</span>
                    <span>攻略查询</span>
                    <span>酒店预定</span>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content ep-bg-purple" />
                </el-col>
            </el-row>
        </div>
        <!-- 回到顶部 -->
        <div class="dianti">
            <el-dropdown placement="left">
                <span class="el-dropdown-link">
                    <img src="/img/weixin.png">
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item>
                            <img src="/img/wei.png" width="150">
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
            <el-dropdown placement="left">
                <span class="el-dropdown-link">
                    <img src="/img/douyin.png">
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item>
                            <img src="/img/dou.png" width="150">
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
            <el-dropdown placement="left">
                <span class="el-dropdown-link">
                    <img src="/img/weibo.png">
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item>
                            <img src="/img/dou.png" width="150">
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
            <el-dropdown placement="left">
                <span class="el-dropdown-link"
                    style="width:50px;height:50px;text-align:center;font-size:20px;line-height: 30px;">
                    返回<br>顶部
                </span>
            </el-dropdown>
            <el-backtop :bottom="26" :right="15">
                <div style="
        height: 70px;
        width: 65px;
        background-color: var(--el-bg-color-overlay);
        text-align: center;
        line-height: 35px;
        color: #1989fa;
      ">
                    返回<br>顶部
                </div>
            </el-backtop>
        </div>
        <!-- 景区详情部分 -->
        <div class="xiangqing">
            <!-- 01 -->
            <div class="SanchaLake">
                <div class="w">
                    <div class="subject">
                        Sancha Lake
                    </div>
                    <div class="one">
                        01
                    </div>
                    <div class="title ">
                        ———— 三 . 岔 . 湖 . 风 . 景 . 区 ————
                    </div>
                    <div class="content">
                        *有240千米迂回曲折的湖岸线,山、水、岛交相辉映,相得益彰*<br>
                        *地处简阳市西部边缘的龙泉山东麓，在烟波浩渺的湖面,镶嵌着113个孤岛和160多个半岛*<br>
                        *1977年2月完成现有规模，由于湖面及周边风景优美，号称“天府明珠”*
                    </div>
                </div>
                <div class="one-img">

                </div>
            </div>
            <!-- 02 -->
            <div class="danjingshan">
                <div class="w">
                    <div class="two">
                        02
                    </div>
                    <div class="title ">
                        ———— 丹 . 景 . 山 . 风 . 景 . 区 ————
                    </div>
                    <div class="content">
                        *这里自古便是蜀中胜地，有独特自然风光和民间传说*<br>
                        *五条山岭会聚主峰的奇观“五龙朝丹景”、三国时期蜀国刘后主的“阿斗读书台”、一树三身的古柏（忠烈柏）*<br>
                        *与双流、仁寿两县接壤,海拔974米,是成都东西屏障龙泉山脉第二高峰*
                    </div>
                    <div class="two-img">
                        <div class="twoingbox">
                            <img src="/img/guanjingtai.jpeg">
                            <p>玻 璃 栈 道</p>
                        </div>
                        <div class="twoingbox">
                            <img src="/img/danjinshan3.jpeg">
                            <p>丹 &nbsp; 景 &nbsp; 台</p>
                        </div>
                        <div class="twoingbox">
                            <img src="img/danjingshan2.jpeg" width="200px">
                            <p>丹 &nbsp; 景 &nbsp; 阁</p>
                        </div>
                    </div>
                    <div class="two-img-content">
                        <div>
                            <p>旅游景区也为了吸引游客惊险刺激的项目层出不穷，对于这些寻求刺激的游客来说横挂在高空中的玻璃栈道无疑是他们最喜欢的，栈道地面铺设的玻璃均采用特别定制的单12毫米双层夹胶特种玻璃，总厚度约30毫米，具备极强的耐压耐磨抗冲击的特性，同时透光率也高于普通夹胶玻璃。
                            </p>
                        </div>
                        <div>
                            <p>随着⼈类建筑结构⼒学与材料科学的⽇臻先进，越来越多超越想象的观景台应运⽽⽣，其中很多观景台，不仅为了看风景，其本⾝更成为了风景，在旅游路线选择能欣赏到该地区最具特⾊、最优美的风景地点，提供给观者良好的观景空间，充分展现优美景⾊。
                            </p>
                        </div>
                        <div>
                            <p>丹景阁是丹景山上特有的景点，区别与其他的阁类建筑，它的特点在于除了屋檐其他全部采用钢式结构和整块的钢化玻璃组成，就保障了建筑的坚固实用的特性，又提供了开阔的视野，建在山顶上，登高远望各类景色尽收眼底，是个不错的观望点。
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 03 -->
        <div class="zongjie">
            <div class="w">
                <img src="img/fengexian.png" width="100%">
                <div class="three">
                    03
                </div>
                <div class="content">
                    <br>
                    *俗话说绿水青山就是金山银山*<br>
                    *祖国好风光，有机会一定要去领略祖国的大好河山*<br>
                    *去旅游吧，去亲近大自然，吧这几年因为疫情留下的遗憾通通都填补上*<br>
                    &nbsp;
                </div>
                <div class="zongjie-back">
                    <div class="zj-1">
                        ——— 去一个有山有水的地方
                    </div>

                    <div class="zj-3">
                        <div class="zj-2">
                            wonderland
                        </div>

                    </div>
                    <div class="zj-4">
                        ————Welcome to<br>
                        Chengdu, Sichuan<br>
                        Sancha Lake<br>
                        &nbsp;
                    </div>
                </div>
            </div>
        </div>
        <!-- 通知公告 -->
        <div id="notice">
            <div class="home">
                <div class="container">
                    <div class="tongzhi">
                        <p>通知公告</p>
                        <span class="icomoon">Notice</span>
                    </div>
                    <div class="article">
                        <ul class="article-tw clearfix">
                            <li>
                                <h2>成都市高温预警，出行请做好防晒工作，成都市区将在七月中旬迎来持续高温天气</h2>
                                <p>继六月高温黄色预警后，成都市区将在七月中旬迎来持续高温天气，外出请挑选</p>
                                <span>新闻<br>资讯</span>
                            </li>
                            <li>
                                <h2>成都市高温预警，出行请做好防晒工作，成都市区将在七月中旬迎来持续高温天气</h2>
                                <p>继六月高温黄色预警后，成都市区将在七月中旬迎来持续高温天气，外出请挑选</p>
                                <span>新闻<br>资讯</span>
                            </li>
                            <li>
                                <h2>成都市高温预警，出行请做好防晒工作，成都市区将在七月中旬迎来持续高温天气</h2>
                                <p>继六月高温黄色预警后，成都市区将在七月中旬迎来持续高温天气，外出请挑选</p>
                                <span>新闻<br>资讯</span>
                            </li>
                        </ul>
                        <el-button plain class="morebtn" color="#fff" :dark="isDark">查看更多资讯》</el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue';
import { Guide, Camera, OfficeBuilding, Memo } from '@element-plus/icons-vue';
const bannerlist = ref([
    { url: '/img/t2.png' },
    { url: '/img/t3.png' },
    { url: '/img/t4.png' }
])
</script>
<style lang="scss" scoped>
.el-carousel {
    min-width: 1000px;

    ul {
        margin-bottom: 60px;

        li {
            button {
                // background: #000;
                height: 3px;
                width: 60px;
                box-shadow: 2px 2px 2px #333;
            }
        }
    }

    img {
        width: 100%;
        height: 480px;
    }
}

.contop {
    min-width: 1000px;
    height: 120px;
    margin-top: -55px;
    z-index: 2;

    .cen {
        height: 110px;
        display: flex;

        .btnbox {
            display: flex;
            z-index: 2;
            width: 100%;
            text-align: center;
            justify-content: center;

            button {
                max-width: 150px;
                background: #fff;
                box-shadow: #676767 1px 1px 15px;
                border: 0;
                height: 100px;
                flex: 1;
                margin: 0 20px;
                line-height: 70px;
                .el-icon{
                    font-size: 60px;

                }
                span {
                    font-size: 60px;
                    color: rgb(18, 150, 215);
                    font-weight: 700;
                }
            }

            :hover {
                background: #269ABC;
            }

            :hover span {
                color: #fff;
            }

        }
    }

    .navtext {
        display: flex;
        text-align: center;
        justify-content: center;

        .btnbox {
            display: flex;
            text-align: center;
            justify-content: center;
            padding: 0;

            span {
                text-align: center;
                flex: 1;
                max-width: 150px;
                margin: 0 20px;
            }
        }
    }
}

.dianti {
    // height: 150px;
    width: 72px;
    // background: #269ABC;
    position: fixed;
    top: 50%;
    right: 50%;
    transform: translateX(600px);
    z-index: 999;

    .el-dropdown {
        .el-dropdown-link {
            background: #fff;
            border-radius: 11px;
            margin-bottom: 10px;
            padding: 10px;
            border: 1px solid #999;

            img {
                border-radius: 11px;
                width: 50px;
                height: 50px;
            }
        }
    }
}

.xiangqing {
    min-width: 1000px;
    text-align: center;
    width: 100%;

    .SanchaLake {

        .subject {
            margin: auto;
            margin-top: 30px;
            width: 200px;
            height: 70px;
            text-align: center;
            font-size: 30px;
            line-height: 70px;
            border: 3px dashed #000000;
            border-right: 0px;
            border-left: 0px;
        }

        .one {
            margin: auto;
            margin-top: 30px;
            width: 100px;
            height: 30px;
            text-align: center;
            font-size: 30px;
            line-height: 30px;
            border: 3px solid #000000;
        }


        .one-img {
            background: url(/img/hujing.jpg)no-repeat center;
            height: 300px;
            margin-top: 30px;
        }
    }

    .title {
        margin: auto;
        margin-top: 20px;
        margin-bottom: 10px;
        width: 400px;
        height: 30px;
        text-align: center;
        font-size: 16px;
        line-height: 30px;
    }

    .danjingshan {
        max-width: 1200px;
        margin: 0 auto;

        .two {
            margin: auto;
            margin-top: 30px;
            width: 100px;
            height: 30px;
            text-align: center;
            font-size: 30px;
            line-height: 30px;
            border: 3px solid #000000;
        }

        .two-img {
            margin-top: 30px;
            display: flex;
            justify-content: space-around;

            .twoingbox {
                width: 200px;
                height: 240px;
                overflow: hidden;
                text-align: center;
                display: inline-block;

                p {
                    width: 200px;
                    font-size: 14px;
                    height: 30px;
                    /* text-indent: 2rem; */
                }

                img {
                    height: 200px;
                }
            }
        }

        .two-img-content {
            display: flex;
            justify-content: space-around;

            p {
                width: 300px;
                font-size: 14px;
                /* text-indent: 2rem; */
            }
        }
    }

}

.zongjie {
    min-width: 1200px;
    margin: 0 auto;
    text-align: center;
    img {
        max-width: 1200px;
        height: 100px;
    }

    .three {
        margin: auto;
        margin-top: 30px;
        width: 100px;
        height: 30px;
        text-align: center;
        font-size: 30px;
        line-height: 30px;
        border: 3px solid #000000;
    }

    .content {
        text-align: center;
    }

    .zongjie-back {
        margin: 0 auto;
        width: 100%;
        min-width: 1000px;
        max-width: 1920px;
        height: 800px;
        background: url(../img/hujing3.jpg)no-repeat center;

        .zj-1 {
            height: 290px;
            border-bottom: 20px solid #FFFFFF;
            font-size: 50px;
            text-indent: 30rem;
            line-height: 420px;
            color: #fff;
            text-shadow: 2px 2px 5px #666;
            background: url(../img/qingshan.jpg)no-repeat bottom;
        }

        .zj-2 {
            /* height: 210px; */
            /* width: 590px; */
            border-bottom: 20px solid #FFFFFF;
            border-right: 20px solid #FFFFFF;
            font-size: 160px;
            text-indent: 3rem;
            line-height: 210px;
            color: #FFFFFF;
            text-shadow: 2px 2px 5px #666;
            display: inline;
        }

        .zj-3 {
            height: 210px;
            border-bottom: 20px solid #FFFFFF;
            /* border-right: 20px solid #FFFFFF; */
        }

        .zj-4 {
            background: url(../img/hst.jpg)no-repeat center;
            background-size: 100%;
            text-align: right;
            font-size: 40px;
            text-indent: 2rem;
            line-height: 65px;
            color: #fff;
            text-shadow: 2px 2px 5px #666;
            padding-right: 30px;
        }
    }
}

#notice {
    min-width: 1000px;
    height: 585px;
    background: url(/img/tu1.jpg)no-repeat center;
    background-size: cover;
    overflow: hidden;
    background-color: #fff;
    position: relative;

    .home {
        display: flex;
        justify-content: center;
        border: 1px solid rgba(0, 0, 0, 0);
        height: 585px;
        background: rgba(0, 0, 50, .4);

        .container {
            position: relative;
            max-width: 1200px;

            .tongzhi {
                font-size: 24px;
                margin: 50px 0 0 50px;
                color: #fff;
            }

            .article {
                height: 400px;
                width: 100%;
                position: relative;
                text-align: center;

                .morebtn {
                    color: #000000;
                    border: 1px solid #999;

                    :hover {
                        font-weight: 700;
                    }
                }

                .article-tw {
                    display: flex;
                    justify-content: center;

                    li {

                        float: left;
                        margin: 20px;
                        height: 281px;
                        max-width: 330px;
                        background: url(/img/xieqie.png)no-repeat center;
                        background-size: cover;
                        background-repeat: repeat-y;
                        list-style: none;

                        span {
                            display: block;
                            width: 50px;
                            height: 60px;
                            line-height: 30px;
                            color: #FFFFFF;
                            text-align: center;
                            position: relative;
                            left: 20px;
                            bottom: -20px;
                            background-color: #269ABC;
                        }

                        h2 {
                            padding: 15px 25px;
                            line-height: 30px;
                            border-bottom: 3px solid #DBDBDB;
                            height: 48px;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            display: -webkit-box;
                            -webkit-line-clamp: 2;
                            -webkit-box-orient: vertical;
                            color: #000000;
                        }

                        p {
                            padding: 0 25px;
                            height: 40px;
                            overflow: hidden;
                            margin-top: 30px;
                            text-overflow: ellipsis;
                            display: -webkit-box;
                            -webkit-line-clamp: 2;
                            -webkit-box-orient: vertical;
                            color: #000000;
                        }

                    }
                }
            }
        }

    }
}
</style>